<template>
	<view>
		<header-common title="登录"></header-common>
		
		<view class="logo-img">
			
		</view>
		
		<view class="form-ipt">
			<uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
				<uv-form-item label="手机号" labelWidth="120rpx" prop="userInfo.phone" borderBottom>
					<uv-input v-model="model1.userInfo.phone"  type="number" placeholder="手机号" border="bottom" >
					</uv-input>
				</uv-form-item>
				
				<uv-form-item label="密码" labelWidth="120rpx" prop="userInfo.password" borderBottom>
					<uv-input v-model="model1.userInfo.password"  type="password" placeholder="密码" border="bottom">
					</uv-input>
				</uv-form-item>
			
				<view class="" @click="navTo('/pages/login/enroll')">
					<text>没有账号?前往注册</text>
					<!-- <text>忘记密码</text> -->
				</view>
				
				<!-- <view class="">
					<text>单选框</text>
					<text>我已阅读并同意《xxx用户协议》和《xxx平台服务条款》，并且授权xxx使用该账号信息(如名称、头像、定位、手机号)进行管理</text>
				</view> -->
			
			
				<uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
				<!-- <uv-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></uv-button> -->
			</uv-form>
		</view>
		
		
	</view>
</template>

<script>
	import {
		login
	} from "@/api/axios.js"
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						phone: '',
						password: '',
					},
				},
				// 验证规则
				rules: {
					'userInfo.phone': [{
							type: 'number',
							required: true,
							message: '请输入手机号',
							trigger: ['blur','change']
						},
						{
							pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '手机号格式错误'
						},
					],
					'userInfo.password':{
								required: true,
								message: '此为必填字段',
								// blur和change事件触发检验
								trigger: ['blur'],
					},

				},
			}
		},
		methods: {
			// 提交
			async submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form.validate().then(res => {
					uni.showToast({
						icon: 'success',
						title: '校验通过'
					})
					
					/* 
					// 发送请求, 验证密码 跳转页面
					let res = await login(userInfo);
					// 
					
					if(res.code !==200){
						uni.showToast({
							icon: 'error',
							title: '秘密错误'
						})
						return;
					}
					 
					// 返回
					uni.navigateBack(1) 
					*/
					
					
				}).catch(errors => {
					uni.showToast({
						icon: 'error',
						title: '校验失败,重新输入'
					})
				})
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			
		
		}
	}
</script>

<style scoped>
	.form-ipt{
		width: 80%;
		margin: auto;
	}
	
	.logo-img{
		height: 300rpx;
	}

</style>